import React, { FC, useMemo } from 'react'
import { InteractiveModel } from '@/api/manager/interactive/interface'
import { Avatar, IconOftenMt, IconTableCheckbox, ItemLabelWrap } from '../../../../../../components'
import { useActionButtonsStore } from '../../../../actionButtons/store'
import { useMccStore } from '@/pages/manager/store'
import { usePollStore } from '@/pages/manager/blocks/poll/store'

export const ItemLabel: FC<InteractiveModel & { propWidth: number }> = (props) => {
	const { mcc, status, propWidth } = props
	const isUpMtPoll = useMccStore((state) => state.curPage === 'upload')
	const isMeetingPoll = useMccStore((state) => state.curPage === 'meeting_poll')
	const hasActions = useActionButtonsStore((state) => state.screenList.length > 0)
	const canShowCheckbox = isUpMtPoll ? hasActions && mcc.confLevel === 2 : hasActions
	const iconflag = useActionButtonsStore((state) => {
		const actions = state.screenList
		const flag = actions.includes('hangUp') || actions.includes('delete') // 操作类型
		return flag
	})
	const activePollingMts = usePollStore((state) => state.activePollingMts)
	const isActivePolling = useMemo(() => {
		if (isMeetingPoll) {
			for (const item of activePollingMts) {
				if (item.mtKey === mcc.mtKey && mcc.status.isPoll && item.isActive) {
					return true
				}
			}
		}
		return false
	}, [isMeetingPoll, activePollingMts])
	return (
		<ItemLabelWrap
			style={{ width: propWidth }}
			nestingLevel={0}
			isOnline={mcc.status.isOnline}
			isVip={mcc.status.isVip}
			isMeeting={false}
			isNameBlue={mcc.status.isManager || mcc.status.isDoubleFlow}
		>
			{canShowCheckbox && (
				<IconTableCheckbox
					className="icon-checked "
					checked={status.isChecked}
					canChecked={true}
					flag={iconflag}
				/>
			)}
			<div className="avatar">
				<Avatar value={mcc} />
				{mcc.status.isInteractive && <IconOftenMt className="icon-often" />}
			</div>
			{mcc.status.isVip && <div className="vip">VIP</div>}
			<div className={`name ${isActivePolling ? 'active-polling' : ''}`} title={mcc.name}>
				<pre data-mtid={mcc.mtKey}>{mcc.name}</pre>
			</div>
		</ItemLabelWrap>
	)
}
